{/*

   ==首页全局搜索组件==
   封装为VUE组件好分开页面写

*/}

<script type="text/html" id="vue--global-search">

    <el-autocomplete v-model="globalSearch.text"
                     :fetch-suggestions="queryGlobalSearch"
                     @select="handleGlobalSearch"
                     @blur="globalSearch = {text: ''}"
                     placeholder="输入测试试试看吧"
                     clearable
                     style="width: 300px;margin-left: 10px;line-height: 46px">
        <template #prefix>
            <el-text class="mx-1" type="info"
                     style="background-color: #ebeef5;border-radius: 3px;padding: 0 5px;line-height: 24px;margin-left: -7px;">
                {{ globalSearch.title ? globalSearch.title : '搜 索' }}
            </el-text>
        </template>
        <template #default="{ item }">
            <div>
                <el-text class="mx-1" type="info" style="background-color: #ebeef5;border-radius: 3px;padding: 0 5px">
                    {{ item.title }}
                </el-text>
                <el-text  class="mx-1" type="primary" style="margin-left: 5px">{{ item.text }}</el-text>
            </div>
            <div>
                <el-text class="mx-1" size="small" type="info">{{ item.des ? item.des : '' }}</el-text>
            </div>
        </template>
    </el-autocomplete>
</script>


<script>
    VueInit.components.GlobalSearch = {
        template:document.getElementById('vue--global-search').innerHTML,
        props:['clickMenu'],
        data(){
          return {
              globalSearch: { text: '' },
              globalSearchType : [
                  { title: '菜 单', sign: 'menu', des: '点击打开菜单', },
                  { title: '管理员', sign: 'user', des: '管理员：支持用户名及账号',  path: '<?= tp()->getRoute([\App\Admin\Controller\Base\AdministratorsController::class, 'lists']) ?>'},
                  { title: '角 色', sign: 'order', des:'搜索角色', path: '<?= tp()->getRoute([\App\Admin\Controller\Base\RoleController::class, 'lists']) ?>'},
              ],
              menuData: [],
          }
        },
        methods:{
            queryGlobalSearch(query, cb){
                if (!query){
                    this.globalSearch = {
                        text: '',
                    }
                    return cb([]);
                }

                let querySelect = [];

                this.globalSearchType.forEach((v) => {
                    if (v.sign === 'menu'){
                        function processRecursiveData(data) {
                            // 递归处理子节点
                            if (data.children && data.children.length > 0) {
                                for (let i = 0; i < data.children.length; i++) {
                                    processRecursiveData(data.children[i]);
                                }
                                return;
                            }

                            // 处理当前节点
                            if (data.title.includes(query) && data.route){
                                querySelect.push(Object.assign(v, {
                                    text:data.title,
                                    info:data
                                }));
                            }
                        }

                        for (const menu of this.menuData) {
                            processRecursiveData(menu);
                        }

                        return;
                    }

                    v.text = query;
                    querySelect.push(v);
                });

                return cb(querySelect);
            },

            handleGlobalSearch(value){
                this.globalSearch = value;
                if(value.sign === 'menu'){
                    this.$emit('click-menu', value.info);
                }else {
                    let route = this.queryMenu(value.path);
                    if(route){
                        route.route += '?global_search=' + value.text;
                        this.$emit('click-menu', route);
                    }
                }
            },
            updateMenu(data){
                this.menuData = data;
            },
            queryMenu(path){
                let route, current, index = 0, waitQueryRouteList = JSON.parse(JSON.stringify(this.menuData));

                while ((current = waitQueryRouteList[index])){
                    index++;

                    if(current.children) waitQueryRouteList.push(...current.children)
                    if(current.route !== path) continue;

                    route = current;
                    break;
                }

                return route;
            }
        }
    }
</script>